<template>
  <div class="recent-day-info">
    <flex-box justify="space-between" class="part-1" center-v>
      <flex-box center-v>
        <flex-box center-h-v class="icon">
          <image-box  :src="require('@assets/icon/weather/kongqizhiliang.png')" size="14" />
        </flex-box>
        空气优 32
      </flex-box>
      <flex-box center-v>
        <flex-box center-h-v class="icon">
          <image-box :src="require('@assets/icon/weather/yudi.png')" size="14" />
        </flex-box>
        2小时内无降雨
      </flex-box>
    </flex-box>

    <div class="part-2">
      <flex-box justify="space-between" v-for="(item, index) in list" :key="index">
        <flex-box center-v>
          <image-box class="icon" :src="item.icon" size="20" />
          {{item.day}}·{{item.weather}}
          <div class="air-quality">{{item.airQuality}}</div>
        </flex-box>
        <div>{{item.maxTemperature}}° / {{item.minTemperature}}°</div>
      </flex-box>
    </div>

    <div class="btn">
      查看近15日天气
    </div>
  </div>
</template>

<script>
import FlexBox from "@/components/flex-box/index";
import ImageBox from "@components/image-box";
export default {
  name: "RecentDayInfo",
  components: {ImageBox, FlexBox},
  data() {
    return {
      list: [
        {
          icon: require('@/assets/icon/weather/duoyun.png'),
          day: '昨天',
          weather: '多云',
          airQuality: '优',
          maxTemperature: '32',
          minTemperature: '27',
        },
        {
          icon: require('@/assets/icon/weather/duoyun.png'),
          day: '今天',
          weather: '多云',
          airQuality: '优',
          maxTemperature: '32',
          minTemperature: '27',
        },
        {
          icon: require('@/assets/icon/weather/duoyun.png'),
          day: '明天',
          weather: '多云',
          airQuality: '优',
          maxTemperature: '32',
          minTemperature: '27',
        }
      ]
    }
  },
  methods: {},

  created() {

  },

  mounted() {

  }

}
</script>

<style lang="scss" scoped>
.recent-day-info {
  line-height: 5.5vh;
  padding-top: 10px;
  padding-bottom: 20px;
  position: relative;
  font-weight: 600;

  .part-1 {
    line-height: 4;
    font-size: 0.7rem;
    .icon {
      border-radius: 50%;
      background-color: rgba(255,255,255,.3);
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
  }

  .part-2 {
    .icon {
      margin-right: 10px;
    }
    .air-quality {
      background-color: rgba(255,255,255, .2);
      padding: 0 12px;
      border-radius: 9999em;
      line-height: 1.8;
      font-size: 0.6rem;
      margin-left: 10px;
      font-weight: 400;
    }
  }

  .btn {
    background-color: rgba(255,255,255, .3);
    border-radius: 999em;
    width: 100%;
    padding: 4px 0;
    margin: 30px 0 0;
  }
}
</style>
